<template>
	<view @click="clickDown" >
		<!-- 支出上框 -->
		<view class="pay-container">
			<view class="pay-message">
				{{message}}
				<view class="pay-money">
					¥  {{payMoney}}
				</view>
			</view>
			<view class="pay-icon">
				<view :class="['down-icon', 'iconfont', 'icon-xiangxiazhankai-yuankuang', {'rotate' : flag}, {'no-rotate' : !flag}]" ></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			message: {
				type: String,
				default: '支出 '
			},
			payMoney: {
				type: Number,
			}
		},
		data() {
			return {
				flag: true,			// 旋转的flag
			}
		},
		methods: {
			// 点击向下后的触发事件
			clickDown(){
				this.flag = !this.flag;
				this.$emit('showPopup');
			}
		}
	}
</script>

<style lang="scss">

	// 支出消息框
	.pay-container {
		// width: 100vw;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		// 钱和人名币符号
		.pay-message{
			flex: 1;
			display: flex;
			justify-content: center;
			margin-left: 50rpx;
			.pay-money {
				margin-left: 20rpx;
				font-weight: 800;
			}
		}
		// 向下箭头
		.down-icon{
			width: 40rpx;
			font-size: 40rpx;
			color: $themePurpleColor;
		}
	}
	
	
	// 向下箭头的判断样式
	.rotate {
		transition: all .5s;
	}
	
	.no-rotate {
        transform:rotate(-180deg);
		transition: all .5s;
	}
</style>
